<template>
	<div class="layout-card" style="min-height: auto">
		<div class="card-content card-search">
			<div class="content-bar" v-if="headtitle != '0'">
				<div class="title">
					<slot name="title">事件基本信息</slot>
				</div>
			</div>
			<FilterBar
				ref="eventInfoRef"
				:close-collapse="true"
				:filters="isEventInfoOptions"
				:rules="eventInfoOptionsRules"
			/>

			<div class="content-bar" v-if="headtitle != '0'">
				<div class="title">
					<slot name="title">事件预警规则</slot>
				</div>
			</div>
			<FilterBar
				ref="eventForewarningRef"
				:close-collapse="true"
				:filters="isEventForewarningOptions"
				:rules="eventForewarningOptionsRules"
			/>

			<div class="content-bar" v-if="headtitle != '0'">
				<div class="title">
					<slot name="title">事件转事故</slot>
				</div>
			</div>
			<FilterBar
				ref="eventIntoAccidentRef"
				:close-collapse="true"
				:filters="isEventIntoAccidentOptions"
				:rules="eventIntoAccidentOptionsRules"
			/>

			<div class="content-bar" v-if="headtitle != '0'">
				<div class="title">
					<slot name="title">事件评价规则</slot>
				</div>
			</div>
			<FilterBar
				ref="eventEvaluateRef"
				:close-collapse="true"
				:filters="isEventEvaluateOptions"
				:rules="eventEvaluateOptionsRules"
			/>

			<div class="btnGroup">
				<el-button @click="onCancel" style="margin-right: 40px">取消</el-button>
				<el-button @click="onConfirm" type="primary" style="margin-left: 40px">保存</el-button>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { ref, useAttrs, reactive, onBeforeMount } from 'vue';
	import type { ElMessage, FormRules } from 'element-plus'
	import FilterBar from '@/components/FilterBar/index.vue';
	import { FieldsItemType, FilterItem } from '@/components/FilterBar/types';
	import { getResource } from '@/api/resource';
	import {
		eventInfoOptions,
		eventForewarningOptions,
		eventIntoAccidentOptions,
		eventEvaluateOptions,
	} from '../../config/filters';
	import {
		eventInfoOptionsRules,
		eventForewarningOptionsRules,
		eventIntoAccidentOptionsRules,
		eventEvaluateOptionsRules,
		isforewarning,
		isenable,
		evaluateIsenable,
	} from './config/rules';

	//事件基本信息
	const eventInfoRef = ref();
	const isEventInfoOptions = ref(eventInfoOptions);
	//事件预警规则
	const eventForewarningRef = ref();
	const isEventForewarningOptions = ref(eventForewarningOptions);
	//事件转事故
	const eventIntoAccidentRef = ref();
	const isEventIntoAccidentOptions = ref(eventIntoAccidentOptions);
	//事件评价规则
	const eventEvaluateRef = ref();
	const isEventEvaluateOptions = ref(eventEvaluateOptions);
	// 手动触发校验
	eventEvaluateOptions.forEach(e=>{
      if (e.prop === 'responseSectionStart') {
        e.events.change = function (value, evt) {
          eventEvaluateRef.value.validateRuleFormRef()
        }
      }
      if (e.prop === 'responseSectionEnd') {
        e.events.change = function (value, evt) {
          eventEvaluateRef.value.validateRuleFormRef()
        }
      }
			if (e.prop === 'processingSectionStart') {
        e.events.change = function (value, evt) {
          eventEvaluateRef.value.validateRuleFormRef()
        }
      }
      if (e.prop === 'processingSectionEnd') {
        e.events.change = function (value, evt) {
          eventEvaluateRef.value.validateRuleFormRef()
        }
      }
			if (e.prop === 'ultimateSectionStart') {
        e.events.change = function (value, evt) {
          eventEvaluateRef.value.validateRuleFormRef()
        }
      }
      if (e.prop === 'ultimateSectionEnd') {
        e.events.change = function (value, evt) {
          eventEvaluateRef.value.validateRuleFormRef()
        }
      }
    })

	/**
	 * 获取数据字典内容
	 */
	const getEventResource = async () => {
		//事件规则管理-紧急程度
		await getResource('event_rules_exigency_level').then((response) => {
			isEventInfoOptions.value[2].inputProps.options = response.data.properties.meta;
		});
		//事件规则管理-事件等级
		getResource('event_rules_event_level').then((response) => {
			isEventInfoOptions.value[4].inputProps.options = response.data.properties.meta;
		});
		//事件规则管理-区域处置单位
		getResource('event_rules_process_group').then((response) => {
			isEventInfoOptions.value[6].inputProps.options = response.data.properties.meta;
		});
		//事件规则管理-事件等级阈值
		getResource('event_rules_level_threshold').then((response) => {
			isEventIntoAccidentOptions.value[2].inputProps.options = response.data.properties.meta;
		});
		//事件规则管理-事件紧急程度阈值
		getResource('event_rules_exigency_threshold').then((response) => {
			isEventIntoAccidentOptions.value[3].inputProps.options = response.data.properties.meta;
		});
	};

	onBeforeMount(getEventResource);
	const emits = defineEmits(['on-cancel', 'on-confirm']);
  const resetEnabled = ()=>{
    isforewarning.value = false;
    isenable.value = false
    evaluateIsenable.value = false
  }
	const onCancel = () => {
		eventInfoRef.value.onReset();
		eventForewarningRef.value.onReset();
		eventIntoAccidentRef.value.onReset();
		eventEvaluateRef.value.onReset();
    resetEnabled()
		emits('on-cancel');
	};
	const onReset = () => {
		eventInfoRef.value.onReset();
		eventForewarningRef.value.onReset();
		eventIntoAccidentRef.value.onReset();
		eventEvaluateRef.value.onReset();
	};
	const onConfirm = () => {
		const eventMessage = {
			eventInfo: eventInfoRef.value.getParams(),
			eventForewarning: eventForewarningRef.value.getParams(),
			eventIntoAccident: eventIntoAccidentRef.value.getParams(),
			eventEvaluate: eventEvaluateRef.value.getParams(),
		};
		emits('on-confirm', eventMessage);
    
	};
	const setInfoValue = (data: FieldsItemType) => {
		eventInfoRef.value?.setFieldsValue(data);
	};
	const setForewarningValue = (data: FieldsItemType) => {
		eventForewarningRef.value?.setFieldsValue(data);
	};
	const setIntoAccident = (data: FieldsItemType) => {
		eventIntoAccidentRef.value?.setFieldsValue(data);
	};
	const setEvaluate = (data: FieldsItemType) => {
		eventEvaluateRef.value?.setFieldsValue(data);
	};
	const InfoRuleFormRef = async (data: FieldsItemType) => {
		return await eventInfoRef.value?.validateRuleFormRef();
	};
	const ForewarningRuleFormRef = async (data: FieldsItemType) => {
		return await eventForewarningRef.value?.validateRuleFormRef();
	};
	const IntoAccidentRuleFormRef = async (data: FieldsItemType) => {
		return await eventIntoAccidentRef.value?.validateRuleFormRef();
	};
	const EvaluateRuleFormRef = async (data: FieldsItemType) => {
		return await eventEvaluateRef.value?.validateRuleFormRef();
	};

	defineExpose({
		setInfoValue,
		setForewarningValue,
		setIntoAccident,
		setEvaluate,
		InfoRuleFormRef,
		ForewarningRuleFormRef,
		IntoAccidentRuleFormRef,
		EvaluateRuleFormRef,
		onReset,
    resetEnabled
	});
</script>

<style scoped lang="less">
  .btnGroup {
    display: flex;
    justify-content: center;
    padding: 40px 0;
  }
  .layout-card {
    background: #f5f7f9;
    min-height: 100%;
    overflow: hidden;
    @titleFontFamily: 'HarmonyOS_Sans_SC_Medium';
    .card-content {
      padding: 24px;
      margin: 12px;
      background: #fff;
      border-radius: 8px;
      &.card-search {
        padding-bottom: 0;
      }
      .content-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        .title {
          font-size: 16px;
          font-family: @titleFontFamily;
          border-left: #2f7df1 2px solid;
          text-indent: 1em;
          color: #353a42;
          line-height: 24px;
          font-weight: bolder;
        }
      }
    }
  }
</style>
